<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.8.2.min.js"></script>
<script language="javascript" type="text/javascript" src="echarts-plain.js"></script>
<script type="text/javascript">
$(function() {

	/**
	 * echarts
	 */
	var myChart = echarts.init(document.getElementById('echarts'));

	myChart.showLoading({
	    text: '正在努力的读取数据中...'    //loading话术
	});

	// ajax return
	myChart.hideLoading();

	// 图表使用-------------------
	option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['手持机', '电子锁']
    },
    toolbox: {
        show : false,
        feature : {
            mark : true,
            dataView : {readOnly: false},
            magicType:['line', 'bar'],
            restore : true,
            saveAsImage : true
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'value'
        }
    ],
    yAxis : [
        {
            type : 'category',
            data : ["北京二支队","北京三支队","中国雪狼突击队","北京一支队"]
        }
    ],
    series : [
        {
            name:'手持机',
            type:'bar',
            stack: '总量',
            itemStyle : { normal: {label : {show: true, position: 'inside'}}},
            data:[0,1,1,0]
        },
        {
            name:'电子锁',
            type:'bar',
            stack: '总量',
            itemStyle : { normal: {label : {show: true, position: 'inside'}}},
            data:[1,1,0,8]
        }
    ]
};

	myChart.setOption(option);

	});

</script>
</head>
<body>
	<div id="echarts" style="height:700px;border:1px solid #ccc;padding:10px;"></div>
</body>
</html>